<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚轮事件</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: #99ff99;
            position: absolute;
        }
    </style>
    <script>
        window.onload=function () {
            /*box1里 鼠标向上滚  box1的高度变短
            *       鼠标向下滚  box1的高度变长
             */
            //获取id为div
            var box1 = document.getElementById("box1");
            //onmousewheel鼠标滚轮滚动事件 会在滚动时触发 但是火狐不支持
            //DOMMouseScroll 滚轮事件  在火狐中使用 来绑定滚动事件
            box1.onmousewheel = function (event) {
                event=event||window.event;
             // alert(event.wheelDelta);//event.wheelDelta可以获取鼠标滚轮滚动的方向 这个方法火狐不支持
            //     alert(event.detail);//event.detail向上滚-3 向下滚3
                if (event.wheelDelta>0||event.detail<0){
                    //向上变短
                    box1.style.height=box1.clientHeight-10+"px";
                }else {
                    box1.style.height=box1.clientHeight+10+"px";
                }
                event.preventDefault&&event.preventDefault(); // 如果有 就取消默认行为
                return false;
            };
            bind(box1, "DOMMouseScroll", box1.onmousewheel);
            //判断鼠标的滚动方向

            function bind(obj, eventStr, callback) {//bind绑定
                if (obj.addEventListener) {
                    //大部分浏览器兼容的方式
                    obj.addEventListener(eventStr, callback, false);
                } else {
                    //IE8兼容的方式
                    obj.attachEvent("on" + eventStr, function () {
                        //在匿名函数中调用回调函数
                        callback.call(obj);//用这个 浏览器chrome 火狐IE8中的this都是显示的是btn01
                    });
                }
            }
        }
    </script>
</head>
<body style="height: 2000px">
<script>
    /*  onmousewheel鼠标滚轮滚动事件 会在滚动时触发 但是火狐不支持
   *    DOMMouseScroll 滚轮事件  在火狐中使用 来绑定滚动事件需要通过addEventListener()函数来绑定
   *    通过addEventListener()函数来绑定 取消默认行为不能用return false
   *    使用event来取消默认行为event.preventDefault();
    *   1.event.wheelDelta可以获取鼠标滚轮滚动的方向 这个方法火狐不支持
    *           向上滚轮 120
    *           向下滚轮-120
    *           event.wheelDelta不看大小 只看正负
    *           box1.clientHeight 可见高度
    *   2.event.detail在火狐里用
    *           向上滚轮-3
    *           向下滚轮3
    * */
</script>
<div id="box1"></div>
</body>
</html>